import styled from 'styled-components'

export const ItemWrapper = styled.div`
	box-sizing: border-box;
	width: ${props => props.itemWidth};
	padding: 8px;
	flex-shrink: 0;

	.inner {
		width: 100%;

		.cover {
			position: relative;
			box-sizing: border-box;
			padding: 66.66% 8px 0;
			border-radius: 3px;
			overflow: hidden;

			img {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.swiper {
			position: relative;

			.control {
				color: #fff;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				display: none;
				justify-content: space-between;
				z-index: 1;
				cursor: pointer;

				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 83px;
					height: 100%;
					background: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.25) 100%);

					&.right {
						background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
					}
				}
			}

			&:hover {
				.control {
					display: flex;
				}
			}

			.indicator {
				position: absolute;
				bottom: 10px;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 110px;
				height: 10px;
				overflow: hidden;
				z-index: 1;

				.dots {
					width: 6px;
					height: 6px;
					border-radius: 50%;
					background: #ffffffcc;
					margin: 0 5px;

					&.active {
						width: 8px;
						height: 8px;
						background: #fff;
					}

					&.near3 {
						width: 3px;
						height: 3px;
					}
				}
			}
		}

		.desc {
			padding-top: 8px;
			font-size: 12px;
			color: #767676;
		}

		.name {
			margin: 4px 0;
			font-size: 16px;
			font-weight: 600;

			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.price {
			font-size: 14px;
			color: ${props => props.theme.text.primaryColor};
		}

		.bottom {
			display: flex;
			align-items: center;

			.MuiRating-decimal {
				margin-right: -2px;
			}

			.bottom-info {
				margin-left: 6px;
				font-size: 12px;
				font-weight: 600;
				color: #484848;
			}
		}
	}
`
